import React, { useState, useCallback } from "react";
import { Slider } from "antd-mobile";
import Base from './base';
import { Common } from 'UtilsCommon';

const renderLabel = (displayIndex, label2, isRed2, value) => {
    return <div className={"divLabel"}>
        <span>{displayIndex > 0 ? `${displayIndex}、` : ""}{label2}</span>
        <div className={'divNum2'}><span>{value}</span></div>
        {isRed2 ? <span style={{ color: 'red', paddingLeft: '0.5rem' }}>*</span> : ''}
    </div>;
};
const renderEmptyTip = (isEmptyTip, value) => {
    return <div className={'divEmptyTip'}>
        {isEmptyTip && value < 1 && <span>请选择十分评分</span>}
    </div>;
};

const judgeNullable = (v) => {
    return !(parseInt(v, 10) > 0);
};

export default (props) => {
    const { property } = Base.getProps(props);

    const [value, setValue] = useState(property.value || 0);
    const [isVisible, setIsVisible] = useState(property.isVisible !== false && property.isDataRight !== false);
    const [isReadOnly, setIsReadOnly] = useState(!!property.isReadOnly);
    const [isEmptyTip, setIsEmptyTip] = useState(false);
    const [, setRefreshId] = useState(null);

    const onChange = useCallback((v) => {
        if (isReadOnly) return;
        setValue(v);
    }, [setValue, isReadOnly]);

    property.setIsVisible = (v) => setIsVisible(v);
    property.setValue = (v) => setValue(Common.getNumber(v));
    property.getValue = () => value;
    property.setIsEmptyTip = (v) => setIsEmptyTip(v);
    property.setIsReadOnly = (v) => setIsReadOnly(v);
    property.judgeNullable = (v) => judgeNullable(v);
    property.refresh = () => setRefreshId(Common.createGuid());

    if (!isVisible) return null;

    const { label, isRed, fillColor, disabled } = property;

    const max = property.max || 10;
    const scale = max / 10;

    return <div className={property.className}>
        {label && renderLabel(property.displayIndex, label, isRed, value)}
        <div className="divValue"><span>{value}</span></div>
        <div className={'divSlider2'}>
            <div className={'divMarks'}>
                <div className={'divItem'}>
                    <div className={'divLine'}></div>
                    <div className={'divNum'}><span>0</span></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine2'}></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine'}></div>
                    <div className={'divNum'}><span>{2 * scale}</span></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine2'}></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine'}></div>
                    <div className={'divNum'}><span>{4 * scale}</span></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine2'}></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine'}></div>
                    <div className={'divNum'}><span>{6 * scale}</span></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine2'}></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine'}></div>
                    <div className={'divNum'}><span>{8 * scale}</span></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine2'}></div>
                </div>
                <div className={'divItem'}>
                    <div className={'divLine'}></div>
                    <div className={'divNum'}><span>{10 * scale}</span></div>
                </div>
            </div>
            <Slider value={value} disabled={disabled} onChange={onChange} min={0} max={max} style={{ '--fill-color': fillColor || 'var(--adm-color-primary)' }} />
        </div>
        {renderEmptyTip(isEmptyTip, value)}
    </div>;
};
